import React, { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { Select, Space, ConfigProvider } from 'antd'
import type { SelectProps } from 'antd'

import { useMyDispatch, useMySelector, MyShallEqual } from '../../../store'
import { setLabel } from '../../../store/modules/create'
import './index.scss'

const options: SelectProps['options'] = [
  { label: 'JavaScript', value: 'JavaScript' },
  { label: 'Java', value: 'Java' },
  { label: 'Python', value: 'Python' },
  { label: 'C++', value: 'C++' },
  { label: 'C', value: 'C' },
  { label: 'C#', value: 'C#' },
  { label: 'HTML', value: 'HTML' },
  { label: 'CSS', value: 'CSS' },
  { label: 'GO', value: 'GO' },
  { label: 'JSON', value: 'JSON' }
]

interface IProps {
  children?: ReactNode
}

const LabelSelector: FC<IProps> = () => {
  const dispatch = useMyDispatch()
  const { label } = useMySelector(
    (state) => ({
      label: state.code.label
    }),
    MyShallEqual
  )

  const handleChange = (value: string[]) => {
    dispatch(setLabel(value))
  }

  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#0ac727'
        },
        components: {
          Select: {
            multipleItemHeight: 20
          }
        }
      }}
    >
      <Space style={{ width: '100%' }} direction="vertical">
        <Select
          mode="tags"
          allowClear
          // maxCount={3}
          style={{ width: '100%' }}
          placeholder={label ? label : '请选择标签'}
          value={label}
          onChange={handleChange}
          options={options}
        />
      </Space>
    </ConfigProvider>
  )
}

export default memo(LabelSelector)
